<template>
  <div :class="factoryType+' factory'">
    <Headbar />
    <Hungbar />
    <div class="nodata tcenter" v-if="info && info.factoryStatus == 'PAUSE' || info && info.factoryStatus == 'SHUT_DOWN'">
      <img src="@/assets/images/nodata/nothing3.png">
      <h5> {{info.factoryStatus == 'PAUSE'?'云工厂维护中':'云工厂已停业'}} </h5>
      <p>如需查看历史购买记录请查看会员中心</p>
      <div class="nodata-btns">
        <a class="nodata-btn-user" @click="routeToPath('/member/main')">会员中心</a>
        <a class="nodata-btn-index" @click="routeToPath('/')">首页</a>
      </div>
    </div>

    <div v-else class="min-height-300" v-loading="loading">
      <HeadMenu :info="info" />
      <TemplateDefault :info="info" v-if="factoryType == 'DEFAULT'" :goodsClassify="goodsClassify" />
      <TemplateVip1 :info="info" v-if="factoryType == 'VIP2'" :goodsClassify="goodsClassify" />
      <TemplateVip2 :info="info" v-if="factoryType == 'VIP3'" :goodsClassify="goodsClassify" />
      <TemplateVip3 :info="info" v-if="factoryType == 'VIP1'" :goodsClassify="goodsClassify" />
      <div class="yh-layout-box class-goods over" v-if="info">
        <div class="factory-left">
          <div class="factory-info">
            <div class="box-head">
              {{ info.factoryName }}
              <p class="tcenter">
                <span class="icons icons-factoryType">
                  <img v-if="info.factoryType == 'DIRECT'" src="@/assets/images/factory/DIRECT.png">
                  <img v-if="info.factoryType == 'FLAGSHIP'" src="@/assets/images/factory/FLAGSHIP.png">
                  <img v-if="info.factoryType == 'WHOLESALE'" src="@/assets/images/factory/WHOLESALE.png">
                </span>
                <!-- <span class="isCertified">{{ info.isCertified?'已认证':'未认证' }}</span> -->
              </p>
            </div>
            <div class="info-msg">
              <p>联系电话：{{ info.phoneNumber }}</p>
              <p>主营品类： <span v-if="info.mainCategories && info.mainCategories.length > 0" v-for="(i, idx) in info.mainCategories">
                <span>{{i.categoryNames[0]}} <span v-if="info.mainCategories.length != idx+1"> /</span></span>
              </span> </p>
              <p>详细地址：{{ info.factoryAddress }}</p>

              <div class="qrcode">
                <img class="qrcode-image maxs" :src="qrcode">
              </div>
              <p class="tcenter">

                微信扫一扫，访问手机网站
              </p>
            </div>
          </div>
          <div class="classify-main" v-if="goodsClassify && goodsClassify.length > 0">
            <div class="classify-item" v-for="(i, index) in goodsClassify" @click="classifyToggle(i, index)">
              <h3 class="cursor" @click="routeToPath('/product/list?classifyId='+i.classifyId+'&factoryId='+info.id)">
                <i v-if="i.status" class="el-icon-caret-bottom"></i>
                <i v-else class="el-icon-caret-right"></i>
                {{ i.classifyName }}
              </h3>
              <p class="cursor" v-show="i.status" v-for="child in i.children"  @click="routeToPath('/product/list?classifyId='+child.classifyId+'&factoryId='+info.id)"
              >{{ child.classifyName }}</p>
            </div>
          </div>
        </div>
        <div class="factory-main">
          <div class="main-head">
            最新商品
            <a @click="routeToPath('/product/list/'+info.id, 'new')">
              <img src="@/assets/images/factory/more.png" alt="">
            </a>
          </div>
          <div class="main-list">
            <div class="goods-item" v-for="(i, index) in goodsList" :key="index">
              <nuxt-link :to="{name:'product-id',params: { id: i.id }}" target="_blank">
              <div class="item-pic">
                <img class="maxs" :src="URL.PIC+i.mainImgPath" :alt="i.title+','+info.factoryName">
              </div>
              <div class="item-info">
                <div class="item-title">
                  {{ i.title }}
                </div>
                <div class="item-price">
                  ￥{{ i.sellingPrice }}
                </div>
              </div>
            </nuxt-link>
            </div>
          </div>
        </div>

      </div>
      <div v-if="factoryType == 'VIP1'">
        <div class="tcenter factory-title">
          <img src="@/assets/images/factory/title.png" alt="">
        </div>
        <div class="brief-main">
          <div class="factory-brief" v-if="info">
            <div class="brief">
              <h3>{{ info.factoryName }}</h3>
              <div class="introduction">
                <p>{{ info.introduction }}</p>
              </div>
            </div>
          </div>
      </div>

      </div>
    </div>
    <Footbars />
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from './components/HeadMenu'
import Hungbar from '@/components/Layouts/Hungbar'
import Footbars from '@/components/Layouts/Footbars'
import { getFactoryInfo, getFactoryGoods, getFactoryClassify, getFactoryBanner, getFactoryTemplateType } from '@/api/factory'
import TemplateVip1 from './templates/Vip1'
import TemplateVip2 from './templates/Vip2'
import TemplateVip3 from './templates/Vip3'
import TemplateDefault from './templates/Default'

export default {
  name: '',
  components: {
    Headbar,
    HeadMenu,
    Hungbar,
    Footbars,
    TemplateVip1,
    TemplateVip2,
    TemplateVip3,
    TemplateDefault,
  },
  data() {
    return {
      loading: false,
      factoryId: this.$route.params.factoryId,
      info: null,
      goodsList: [],
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      goodsClassify: [],
      total: 0,
      pageSizes: [12, 24, 36, 60],
      listQuery: {
        page: 1,
        size: 12,
        factoryId: this.$route.params.factoryId
      },
      qrcode: null,
      factoryType: null
    }
  },
  beforeRouteLeave(to, from, next) {
    this.routeToPath(to.fullPath, 'current')
  },

  head () {
    return {
      title: '一呼百应工业品直卖网_'+this.info.factoryName+'_主营：'+this.categoryNames+'',
      meta: [
        { name: 'keywords', content: '一呼百应,'+this.categoryNames+'厂家,'+this.categoryNames+'供应商,'+this.info.factoryName+',mro' }
      ]
    }
  },

  async asyncData ({ app, query }) {
    let [res1, res2, res3, res4] = await Promise.all([
      app.$axios.get('/factory_decoration/frontend/factory_template/select?factoryId='+app.context.params.factoryId+'&terminal=PC'),
      app.$axios.get('/factory/frontend/factory/select_one?id='+app.context.params.factoryId),
      app.$axios.get('/product/front/classify/custom_list?factoryId='+app.context.params.factoryId),
      app.$axios.get('/product/qd_product_list?size=12&page=1&factoryId='+app.context.params.factoryId),
     ])

    //拼接类目
    let categoryNames = ''
    if(res2.data.data.mainCategories.length){
      res2.data.data.mainCategories.forEach(item => {
        categoryNames += item.categoryNames[0] + '/'
      })
    }


     return {
       factoryType: res1.data.data,
       info: res2.data.data,
       goodsClassify: res3.data.data,
       goodsList: res4.data.data.list,
       total: res4.data.data.total,
       categoryNames: categoryNames != '' ? categoryNames.substring(0, categoryNames.length-1): categoryNames
     }
  },
  created() {
    console.log(this.factoryType)
    // this.factoryXcxCode();
  },
  watch: {

  },
  methods: {
    // 云工厂二维码
    factoryXcxCode() {
      this.qrcode = this.URL.baseURL+'/factory/frontend/factory/wx_app_image/0/1101731899204730880.png'
    },

    classifyToggle(item, index) {
      for (var idx in this.goodsClassify) {
        if(item.superId == this.goodsClassify[idx].superId){
          this.$set(this.goodsClassify[idx], 'status', false)
        }
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.factory{
    // overflow: hidden;
  .factory-left{
    float: left;
    width: 240px;
    margin-bottom: 30px;
    .info-msg{
      border: 1px solid #ddd;
      background: #fff;
      padding: 15px;
      line-height: 26px;
    }
  }
  .factory-classify{
    background: #fff;
  }
  .icons-FLAGSHIP{
    background-image: url('~assets/images/factory/FLAGSHIP.png');
  }
  .icons-WHOLESALE{
    background-image: url('~assets/images/factory/WHOLESALE.png');
  }
  .icons-DIRECT{
    background-image: url('~assets/images/factory/DIRECT.png');
  }
  .icons-factoryType,.icons-factoryType img{
    width: 80px;
    height: 22px;
  }
  .isCertified{
    font-size: 14px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: top;
    margin-top: 2px;
  }
  .factory-main{
    width: 956px;
    float: left;
    margin-left: 0px;
    .main-head{
      background:linear-gradient(0deg,rgba(78,78,78,1),rgba(53,53,53,1));
      margin-left: 15px;
      line-height: 46px;
      margin-bottom: 10px;
      color: #fff;
      padding-left: 15px;
      padding-right: 15px;
      font-size: 16px;
      letter-spacing: 2px;
      a{
        color: #fff;
        float: right;
        letter-spacing: 0px;
      }
    }
  }
}

.brief-main{
  background-color: #fff;
  width: 100%;
  margin-bottom: -10px;
}
.factory-title{
  padding-top: 30px;
  padding-bottom: 20px;
}
.factory-brief{
  background-color: #fff;
  background-image: url('~assets/images/factory/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 401px;
  width: 1200px;
  position: relative;
  overflow: hidden;
  color: #fff;
  margin: 0 auto;
  .introduction{
    height: 290px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    // overflow-y: scroll;
  }
  .brief{
    position: absolute;
    left: 50%;
    margin-left: -210px;
    width: 420px;
    top: 0;
    padding-bottom: 160px;
    padding: 30px 40px 100px 40px;
    overflow: hidden;
    font-size: 14px;
    background-color: rgba(0,0,0,0.3);
    h3{
      text-align: center;
      margin: 10px 0;
    }
    p{
      line-height: 28px;
    }
  }
}
.factory-title{
  background-color: #fff;
}
.classify-head{
  background-color: #353535;
  padding: 13px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  margin-top: 20px;
}
.classify-main{
  border: 1px solid #ddd;
  padding: 15px;
  padding-left: 20px;
  background-color: #fff;
  margin-top: 20px;
  h3{
    color: #1E1E20;
    font-size: 14px;
    font-weight: 500;
  }
  p{
    padding-left: 25px;
    font-size: 14px;
    color: #888888;
  }
}
.box-head{
  background-color: #353535;
  color: #fff;
  padding: 20px 20px;
  font-size: 18px;
  letter-spacing: 2px;
  p{
    margin-bottom: 0;
  }
}
.qrcode{
  width: 120px;
  height: 120px;
  text-align: center;
  margin: 0 auto;
}
.main-list{
  overflow: hidden;
  padding-bottom: 10px;
}
.goods-item{
  background-color: #fff;
  width: 224px;
  height: 310px;
  float: left;
  margin-left: 15px;
  margin-bottom: 15px;
  padding-top: 0;
  padding-bottom: 20px;
  cursor: pointer;
  transition: all 0.4s;
  a{
    text-decoration: none;
  }
  &:hover{
    box-shadow: 0 8px 20px rgba(0,0,0,0.1)
  }
  .item-pic{
    width: 224px;
    height: 224px;
  }
  .item-info{
    padding: 20px;
  }
  .item-title{
    font-size: 14px;
    color: #333;
    line-height: 20px;
    height: 40px;
    width: 100%;
    display: -webkit-box;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    letter-spacing: 1px;
  }
  .item-price{
    text-align: left;
    color: #D0021B;
    margin-top: 12px;
    margin-bottom: 0px;
  }
}
.class-goods{
  margin-top: 15px;
}
.VIP1{

}
// .DEFAULT{
//   .factory-main .main-head{
//     background:linear-gradient(0deg,rgba(58,128,224,1),rgba(28,93,183,1))
//   }
// }
</style>
<style>
.factory .pagination-container{
  background: none !important;
}
</style>
